<template>
    <div class="park_cord">

        <el-card shadow="never" class="card-com">
            <div class="card-1">
                <searchPanel @refresh="getData('reset')">
                    <!-- 查询面板 -->
                    <template v-slot:search>
                        <el-form :inline="true" :model="listSearch" class="demo-form-inline" label-width="120px">
                            <el-row :gutter="20">

                                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                                    <el-form-item label="产品名称" style="width: 100%;">
                                        <BlackSelect v-model:select-value="listSearch.condition.productCode"
                                            :filterable="true" :options="listCollect.productList"
                                            @my-change="getData('search')" />
                                    </el-form-item>
                                </el-col>
                                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                                    <el-form-item label="产品大类" style="width: 100%;">
                                        <BlackSelect v-model:select-value="listSearch.condition.productCategoryCode"
                                            :filterable="true" :options="listCollect.totalProduct"
                                            @my-change="getData('search')" />
                                    </el-form-item>
                                </el-col>


                                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                                    <el-form-item label="供应商编码">
                                        <BlackSelect v-model:select-value="listSearch.condition.supplierCode"
                                            :filterable="true" :options="listCollect.supplierList"
                                            @my-change="getData('search')" />
                                    </el-form-item>
                                </el-col>
                                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                                    <el-form-item label="产品类型">
                                        <BlackSelect @myChange="getData('search')"
                                            v-model:select-value="listSearch.condition.productType"
                                            :options="allProductType"></BlackSelect>
                                    </el-form-item>
                                </el-col>
                                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                                    <el-form-item label="是否投放">
                                        <BlackSelect @myChange="getData('search')"
                                            v-model:select-value="listSearch.condition.putSwitch"
                                            :options="productPutSwitch"></BlackSelect>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row justify="end">
                                <el-button type="primary" @click="getData('search')">查询</el-button>
                                <el-button @click="getData('reset')">重置</el-button>
                            </el-row>

                        </el-form>
                    </template>
                    <!-- 字段添加 -->
                    <template v-slot:edit>

                    </template>
                </searchPanel>
            </div>
            <div class="card-2">
                <!-- table数据 -->
                <!-- <h1>productOnlineOperation</h1> -->
                <OnlyTable ref="onlyTableOpeRef" class="card-2" :tableProps="tableProp" :pageTotal="pageParams.total"
                    @get-page="handPage" :tableData="pageParams.tableData" :tableHeight="pageParams.tableHeight"
                    :loading="pageParams.loadIng">

                    <template #productAttachmentList="scope">
                        <template v-if="scope.row.productAttachmentList && scope.row.productAttachmentList.length > 0">
                            <el-image style="width: 35px; height: 35px"
                                :src="scope.row.productAttachmentList[0].attachmentUri"
                                :previewSrcList="[scope.row.productAttachmentList[0].attachmentUri]" fit="cover"
                                :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-teleported="true">
                            </el-image>
                        </template>
                    </template>
                    <template #putSwitch="scope">
                        <el-switch v-model="scope.row.putSwitch" @click="switchChange(scope.row,scope.row.putSwitch)" :active-value="1" :inactive-value="2" />
                    </template>
                    <template #pageViews="scope">
                        <span>{{ scope.row.pageViews }}</span> <br>
                        较昨日 <span>{{ scope.row.yesterdayPageViews }}</span>
                    </template>
                    <template #uniqueVisitors="scope">
                        <span>{{ scope.row.uniqueVisitors }}</span> <br>
                        较昨日 <span>{{ scope.row.yesterdayUniqueVisitors }}</span></template>
                    <template #orderQuantity="scope">
                        <span>{{ scope.row.orderQuantity }}</span> <br>
                        较昨日 <span>{{ scope.row.yesterdayOrderQuantity }}</span></template>
                    <template #conversionNum="scope">
                        <span>{{ scope.row.conversionNum }}</span> <br>
                        较昨日 <span>{{ scope.row.yesterdayConversionNum }}</span></template>
                    <template #validConversionNum="scope">
                        <span>{{ scope.row.validConversionNum }}</span> <br>
                        较昨日 <span>{{ scope.row.yesterdayValidConversionNum }}</span></template>
                    <template #todayUvConversionRate="scope">
                        <span>{{ scope.row.todayUvConversionRate }}</span> <br>
                        较昨日 <span>{{ scope.row.yesterdayCancellationRate }}</span></template>
                    <template #todayCancellationRate="scope">
                        <span>{{ scope.row.todayCancellationRate }}</span> <br>
                        较昨日 <span>{{ scope.row.yesterdayUvConversionRate }}</span></template>
                    <template #handle="scope">
                        <el-button type="primary" size="small" link
                            @click="detailBtn('productCode', scope.row)">订单转化明细</el-button>
                        <el-button type="primary" size="small" link @click="statisticalChart(scope.row)">统计图</el-button>
                    </template>
                </OnlyTable>
            </div>
        </el-card>
        <orderDetailVue ref="detailOrder"></orderDetailVue>
        <StaticChart ref="staticChartRef"></StaticChart>
    </div>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { onMounted, ref, nextTick, onUnmounted, defineAsyncComponent } from 'vue';
import { Search, Plus, Refresh, Download } from '@element-plus/icons-vue'
import { useComListData } from '@/store/list';

import { useEnumStore } from "@/store/enumeration"
import { productOnlineOperationStore } from './pageStore'
const onlyTableOpeRef = ref()
const { listCollect, getAllTotalProduct, getProListAll, getSupplierAllList } = useComListData()
const orderDetailVue = defineAsyncComponent(() => import('@/components/productAndChannel/detailOrder.vue'))
const { detailData, tableProp, listSearch, pageParams, detailOrder, staticChartRef } = storeToRefs(productOnlineOperationStore())
const { getDate1, handPage, statisticalChart ,switchChange} = productOnlineOperationStore()
const { allProductType,productPutSwitch } = storeToRefs(useEnumStore())

onMounted(() => {
    getDate1('reset')
    getAllTotalProduct()
    getProListAll({})
    getSupplierAllList()

})

const getData = (type: string) => {
    if (type == 'reset') onlyTableOpeRef.value.initPagination()
    getDate1(type)
}

const detailBtn = (type: string, row: any) => {
    detailOrder.value?.show(type, row)
}
</script>

<style scoped lang="scss">
.park_cord {
    height: calc(100vh - 70px);

    .card-com {
        display: flex;
        flex-direction: column;
        // height: 100%;

        .card-2 {
            flex-grow: 1;
        }
    }
}
</style>